<template>
  <div style="background: #FFFFFF;padding: 20px 10px 10px 10px">
    <!--查询区域-->
    <div class="table-page-search-wrapper">
      <!--      <a-form layout="inline" @keyup.enter.native="searchQuery">-->
      <!--        <a-row :gutter="24">-->
      <!--          <a-col :xl="3" :lg="7" :md="8" :sm="24">-->
      <!--            <a-form-item label="工序">-->
      <!--              <j-dict-select-tag-->
      <!--                  placeholder="请选择工序"-->
      <!--                  v-model="queryParam.workingProcedure"-->
      <!--                  dictCode="procedure"-->
      <!--                  @change="loadData(1)" />-->
      <!--            </a-form-item>-->
      <!--          </a-col>-->
      <!--          <a-col :xl="3" :lg="7" :md="8" :sm="24">-->
      <!--            <a-form-item label="车间">-->
      <!--              <j-dict-select-tag-->
      <!--                  placeholder="请选择车间"-->
      <!--                  v-model="queryParam.workshop"-->
      <!--                  dictCode="workshop"-->
      <!--                  @change="loadData(1)" />-->
      <!--            </a-form-item>-->
      <!--          </a-col>-->
      <!--          <a-col :xl="18" :lg="4" :md="4" :sm="24">-->
      <!--            <div style="display: flex; justify-content: flex-end">-->
      <!--              <a-button type="primary" @click="handleAdd">新增班制</a-button>-->
      <!--              <a-button type="primary" style="margin-left: 8px" @click="handleExportTemplate('班制模板')">下载导入班制模板</a-button>-->
      <!--              <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">-->
      <!--                <a-button type="primary" style="margin-left: 8px">导入班制</a-button>-->
      <!--              </a-upload>-->
      <!--              <a-button type="primary" style="margin-left: 8px" @click="handleExportXls('班制表')">导出班制</a-button>-->
      <!--              <a-button type="primary" style="margin-left: 8px" @click="batchDel">批量删除</a-button>-->
      <!--            </div>-->
      <!--          </a-col>-->
      <!--        </a-row>-->
      <!--      </a-form>-->
    </div>
    <div class="shift-table">
      <div class="item" v-for="(day, i) in dataSource" :key="i">
        <div class="th">
          <h3>第{{ i + 1 }}天</h3>
          <h3>{{ day.date }}</h3>
          <div class="time">
            <span>0</span><span>4</span><span>8</span><span>12</span><span>16</span><span>20</span><span>24</span></div>
        </div>
        <div class="td">
          <div
              v-for="(item, index) in day.arr"
              :key="index"
              class="plan"
              :class="{ blue: item.bc == '甲班', purple: item.bc == '乙班' }"
          >
            <el-row type="flex" justify="space-between">
              <el-col style="color: #182236">{{ item.bc }}</el-col>
              <span style="color: #48556a">{{ item.diff }}H</span>
            </el-row>
            <div style="white-space: nowrap">
              ({{ item.start }}-{{ item.end }})
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JDictSelectTag from '@/components/dict/JDictSelectTag.vue'
import JInput from '@/components/jeecg/JInput'

export default {
  mixins: [JeecgListMixin],
  components: {
    JInput,
    JDictSelectTag
  },
  data() {
    return {
      columns: [],
      url: {
        list: '/crm_shift_detail/crmShiftDetail/list' //查询列表
      }
    }
  }
}
</script>

<style lang="less">
.shift-table {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(7, 14.3%);
  border: 1px solid #ededed;
  border-left: none;
  margin: 5px 0;

  .item {
    border-bottom: 1px solid #ededed;
    border-left: 1px solid #ededed;

    .th {
      padding: 5px;
      background: rgb(246, 248, 250);
      border-bottom: 1px solid #ededed;

      h3 {
        font-size: 13px;
        font-weight: 500;
        color: #292b3d;
        margin: 0;
        text-align: center;
      }

      .time {
        display: flex;
        justify-content: space-around;

        span {
          font-size: 12px;
          font-weight: 400;
          color: #606d86;
        }
      }
    }

    .td {
      padding: 8px 15px;
      min-height: 54px;

      .plan {
        height: 38px;
        margin-bottom: 8px;
        padding: 3px 7px;
        font-size: 12px;
        color: #48556a;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 2px 0px 0px 2px;
        background: #f4fbf6;
        border-left: 3px solid #48bb94;
      }

      .plan.blue {
        background: #f4f7fb;
        border-left: 3px solid #2c67f6;
      }

      .plan.purple {
        background: #f1eeff;
        border-left: 3px solid #8773f3;
      }

      &.disabled {
        background-color: rgb(248, 249, 251);
      }
    }
  }

  .item:last-child {
    border-right: 1px solid #ededed;
  }
}
</style>